css的引入：
内部（行内）样式，外部样式
内部样式：在head头部用<style></style>标签来声明某标签的格式。
外部标签：样式表单独用一个或多个文件写，需要时用
<link rel="stylesheet" href="用到的样式表">进行连接

style
选择器：
1.全局选择器：常用于初始化
*{
...
}
2.元素选择器
p{

}
3.ID选择器:id只能使用一次，用#来定义

4.类选择器：规定用原点.定义，针对你想要的所以标签
eg<h1 class="h1"></h1>
优先级：行内样式 > ID > 类 > 元素

字体属性：
    color:red , color:#ff0000, color:rgb(255,0,0)
    color:rgba(255,0,0,1) 1代表完全不透明，0代表完全透明 a:alpha透明度
字体大小:font-size
        最小的尺寸12px，像素
文本的粗细：font-weight
        bold粗体， bolder更粗，lighter更细，100-900.
        400默认，700为bold

字体样式：font-style
    normal:正常。
    italic:斜体
    font-family: 字体，可供选择

css背景属性：
    background-color:设置背景颜色
    background-image:设置背景图片
    background-position：设置背景图片显示位置
    background-repeat：设置背景图片如何填充
    background-size：设置背景图片大小属性

    1.%color:需要设置背景颜色的范围通过width和height设置
    red, #ff0000, rgb, rgba
    2.%image：显示的长宽需要用width和height设置，以左上角为基点扩充，不会改变比例
    可能只会显示一部分
    background-image:url("所要显示的背景图片的路径")
    3.%repeat：设置如何平铺背景图像
    如果长宽超过图片大小，会重复
    no-repeat:不重复，repeat-x ：x方向重复，repeat：默认
    4.%size:背景图片大小
    填充设置的背景范围，可能会拉伸范围
    length, percentage,
    cover:保持横纵比，缩放成能完全覆盖背景区域的最小大小
    contain：保持横纵比，缩放成能适合背景定位区域的最大大小
    5.%position：渲染的起始位置
    x%,y%

    关系选择器：
    选择所有被E包含的F元素 E F{}
    子代选择器：
    选择所以作为E元素直接子元素F,深层的不起作用 E>F{}
    相邻兄弟选择器：
    选择紧跟E后的F元素 E+F{}    
    通用兄弟选择器：
    选择E元素之后的所以兄弟元素F,作用多个元素 E~F{}

css盒子模型本质上是一个盒子，封装周围的html元素，包括：
    外边距（margin），边框（border），内边距（padding），和内容（content）
    ● Margin(外边距)-清除边框外的区域，外边距是透明的
    ® Border(边框)-围绕在内边距和内容外的边框
    ® Padding(内边距)-清除内容周围的区域，内边距是透明的
    · Content(内容)-盒子的内容，显示文本和图像

    padding:上下，一个值，左右一个值。padding-left/right/top/bottomm
    border:5px(边框的宽), solid（边框的类型）
    Margin:50px padding同

css3新特性：弹性盒子模型
        CSS3弹性盒内容
        弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
        将其定义为弹性容器
        弹性容器通过设置 display 属性的值为 fex
        弹性容器内包含了一个或多个弹性子元素

flex-direction属性
            定义
            flex-direction 属性指定了弹性子元素在父容器中的位置
            语法

            row:横向从左到右排列(左对齐)，默认的排列方式从后往前排最后一项排夺最前面
            row-reverse:反转横向排列
            column:纵向排列
            column-reverse:反转纵向排列，从后往前排，最后一项排在最上面

//justify-content 属性
    定义
    内容对齐(justify-content)属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线(main axis)对齐

    1.flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行
    的main-start边线，而后续弹性项依次平齐摆放
    2.fex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边
    线，而后续弹性项依次平齐摆放
    3.center 弹性项目居中紧挨着填充。(如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出)

//align-items 属性
    定义            
    align·ltems 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式

    1.flex-start 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界
    2.flex-end 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界
    3.center弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度)

子元素上的属性
    flex
    flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间默认为0，即如果存在剩余空间，也不放大
    如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按
    100%

文档流产生的问题：
    1.高矮不齐，底边对其；2.空格折叠 3.元素无间隙

脱离文档流：
    1.浮动
    2.绝对定位
    3.固定定位

浮动：float属性定义元素在哪个方向浮动，任意元素都可以浮动
    值：left|right
    只有左右浮动

浮动副作用：
    1.浮动元素造成父元素高度塌陷
    2.后续元素会收到影响
解决方法：
    1.设置父元素高度
    2.clear： left|right|both （去除左右浮动）
    3.overflow
    4.伪对象   eg.
                    .container::after{
                        content:""
                        display:block
                        clear:both
                    }

定位：
    position属性指定元素的定位属性；
    relative 相对定位   未脱离文档流
    absolute 绝对定位   脱离文档流
    fixed 固定定位      脱离文档流

    设置定位后有四种属性：
        left right top bottom
    fixed属性使元素固定在页面的固定位置
    relative和absolute相对父级的位置进行定位

    z-index属性：用于设置元素的堆叠顺序。

圆角：
    使用 CSS3 border-radius 属性，你可以给任何元素制作"圆角"
    border-radius 属性，可以使用以下规则:
     四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
     三个值: 第一个值为左上角,第二个值为右上角和左下角，第三个值为右下角
     两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
    一个值: 四个圆角值相同

box-shadow描述:阴影
h-shadow    必选，水平阴影的位置
v-shadow    必选，垂直阴影的位置
blur        可选，模糊距离
color       可选，阴影的颜色


动画：定义在style中
@keyframes name{
    from|0%{
    css样式
    }
    percent{
    css样式
    }
    to|100%{
    css样式
    }
}

name:动画名称，开发人员自己命名
percent:为百分比值，可以添加多个百分比值;

animation执行动画
animation:name duration timing-function delay iteration-count direction;


值
name                        设置动画的名称
duration                    设置动画的持续时间
timing-function             设置动画效果的速率(如下)
delay                       设置动画的开始时间(延时执行)
iteration-count             设置动画循环的次数，infinite为无限次数的循环
direction                   设置动画播放的方向(如下)
animation-play-state        控制动画的播放状态:running代表播放，而paused代表停止播放
描述

timing-function值
    ease        逐渐变慢(默认)
    linear      匀速
    ease-in     加速
    ease-out    减速
    ease-in-out 先加速后减速

direction值
    normal      默认值为normal表示向前播放
    alternate   动画播放在第偶数次向前播放，第奇数次向反方向播放


div:hover{
    鼠标划上去产生的变化
}


媒体查询：
    媒体查询能使页面在不同在终端设备下达到不同的效果
    媒体查询会根据设备的大小自动识别加载不同的样式
    设置meta标签
    使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签,
    <meta name="viewport" content="width=device-width", initial-scale=l,maximum-
    scale=1, user-scalable='no'>
    参数解释
    width = device-width 宽度等于当前设备的宽度
    initial-scale 初始的缩放比例(默认设置为1.0)
    maximum-scale 允许用户缩放到的最大比例(默认设置为1.0)
    user-scalable用户是否可以手动缩放(默认设置为no)

媒体查询语法
    @media screen and (条件){

    }
    通过条件来规定在某个设备上显示的样式    

雪碧图：
    Css Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零
    星图片都包含到一张大图中去
    优点
        减少图片的字节
        减少网页的http请求，从而大大的提高页面的性能
    原理
        通过background-image引入背景图片
        通过background-position把背景图片移动到自己需要的位置
    类似于从一张大图片截取出一张小图片。

字体图标：
    我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页
    面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资
    源的问题
    常用字体图标库:[阿里字体图标库]
    优点
    ① 轻量性:加载速度快，减少http请求
    ® 灵活性:可以利用CSS设置大小颜色等
    ③ 兼容性:网页字体支持所有现代浏览器包括IE低版本
    